<template>
    <common-container v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中…">
        <div slot="common-search">
            <!-- <div class="common-btn">
                <el-button type="primary" size="mini" @click="exportExcelChild">导出excel</el-button>
            </div> -->

            <div class="search-common">
                <el-form :inline="true" :model="searchForm" ref="searchForm" size="mini">

                    <el-row :gutter="10">
                        <el-col :sm="8">
                            <el-form-item label="" prop="recode_name">
                                <el-input placeholder="请输入内容" v-model="searchForm.svalue" class="input-with-select">
                                    <el-select v-model="searchForm.stype" slot="prepend" placeholder="请选择" style="width:150px;">
                                        <el-option label="手机号码" value="phonenum"></el-option>
                                        <el-option label="代理人编码" value="code"></el-option>
                                        <el-option label="代理人名称" value="name"></el-option>
                                        <el-option label="证件号码" value="idnum"></el-option>
                                        <el-option label="银行卡号" value="banknum"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item label="证件类型" prop="idtype">
                                <el-select v-model="searchForm.idtype" placeholder="请选择">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="身份证" value="0"></el-option>
                                    <el-option label="营业执照" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="8">
                            <el-form-item>
                                <el-button type="success" @click="add">新增</el-button>
                                <el-button type="primary" @click="searchFromChild">查询</el-button>
                                <el-button type="info" @click="resetForm('searchForm')">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </div>

        </div>
        <div slot="common-body">
            <el-table :data="tableData" border style="width: 100%" size="mini">
                <el-table-column prop="username" label="登录帐号">
                </el-table-column>
                <el-table-column prop="code" label="代理人编码">
                </el-table-column>
                <el-table-column prop="name" label="代理人名称">
                </el-table-column>
                <el-table-column prop="phonenum" label="手机号码">
                </el-table-column>

                <el-table-column prop="address" label="证件类型">
                    <template slot-scope="scope">
                        {{scope.row.idtype==0?'身份证':'营业执照'}}
                    </template>
                </el-table-column>
                <el-table-column prop="idnum" label="证件号码">
                </el-table-column>
                <el-table-column prop="bankname" label="银行">
                </el-table-column>
                <el-table-column prop="banknum" label="银行卡号">
                </el-table-column>
                <el-table-column prop="tot_trans" label="总下单金额">
                </el-table-column>
                <el-table-column prop="address" label="状态">
                    <template slot-scope="scope">
                        {{scope.row.state==0?'启用':'禁用'}}
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="最新修改时间">
                </el-table-column>
                <el-table-column prop="create_user" label="操作者">
                </el-table-column>
                <el-table-column prop="address" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="editPoxyItem(scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" @click="restPwdPoxyItem(scope.row)">重置密码</el-button>
                        <el-button type="text" size="mini" @click="statusPoxyItem(scope.row)"> {{scope.row.state==1?'启用':'禁用'}}</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <add-diglog :title="title" :edit-data="userItem" :role-dialog="proxyDialog" @addAndClick="addAndEditMenu" @cancelAndClick="cancelDialog"></add-diglog>
        </div>
        <div slot="common-page">
            <page-pagination v-on:pageFun="pageFunNumber" :page="page" :pageSize="pageSize" :total="total"></page-pagination>
        </div>
    </common-container>
</template>

<script>
import service from "@/service";
import pagePagination from "@/components/Common/pagePagination";
// import commonDialog from "@/components/Common/CommonDialog";
import commonContainer from "@/components/Common/CommonContainer";
import { computedDay184, dateFormat, confirmDiloag } from '@/assets/utils.js'
import addDiglog from "./add";
export default {
    props: ['breadcrumb'],
    data() {
        return {
            page: 1,
            pageSize: 10,
            total: 0,
            userItem: {},
            title: '添加/修改',
            loading: false,
            tableData: [],
            searchForm: {
                svalue: '',
                stype: 'phonenum',
                idtype: ''
            },
            dataList: {
                name: '',
                code: '',
                username: '',
                phonenum: '',
                idtype: '0',
                idnum: '',
                idpic: '',
                bankname: '',
                banknum: '',
                tot_trans: '',
                state: '',

            },
            proxyDialog: false

        }
    },
    created() {
        this.$store.dispatch('setNavName', this.breadcrumb);
        this.queryTableList();
        this.userItem = this.dataList
    },
    methods: {
        //查询列表
        async  queryTableList(page = 1) {
            let params = Object.assign({}, this.searchForm, {
                page: page,
                pageSize: this.pageSize
            })
            let res = await service.haiheiQueryProxyInfoUserServer(params);
            if (res.success) {
                this.tableData = res.result.pageList
                this.total = res.result.nums;
                this.page = res.result.page;
                this.pageSize = res.result.pageSize;
            } else {
                this.$message({
                    type: "error",
                    message: res.msg
                });
            }
        },
        //分页
        pageFunNumber(page) {
            this.queryTableList(page);
        },
        //添加
        add() {
            this.userItem = this.dataList
            this.proxyDialog = true;
        },
        //取消
        cancelDialog({ bool }) {
            this.proxyDialog = bool;
        },

        //添加和编辑
        async  addAndEditMenu(params, formName) {
            let res = null;
            if (params.create_user) {
                res = await service.haiheiUpdateProxyInfoServer(params);
            } else {
                res = await service.haiheiAddProxyInfoServer(params);
            }
            if (res.success) {
                this.queryTableList(this.page);
                this.proxyDialog = false;

            } else {
                this.$message({
                    type: "error",
                    message: res.msg
                });
            }
        },
        //编辑
        editPoxyItem(item) {
            item.idtype = item.idtype + '';
            this.userItem = Object.assign({},item);
            this.proxyDialog = true;
        },
        //重置
        restPwdPoxyItem(item) {
            confirmDiloag({ _this: this, text: '您确定要重置密码吗？' }, async () => {
               let res = await service.haiheiResetPwdForProxyUserServer({ username: item.username, password: '000000' });
                if (res.success) {
                    this.queryTableList(this.page);
                    this.proxyDialog = false;

                } else {
                    this.$message({
                        type: "error",
                        message: res.msg
                    });
                }
            })

        },
        //禁用启用
        statusPoxyItem(item) {
            let state=item.state==0?1:0;
            confirmDiloag({ _this: this, text: '您确定要进行该操作吗？' }, async () => {
               let res = await service.haiheiSetStateForProxyUserUserServer({ code: item.code, state: state});
                if (res.success) {
                    this.queryTableList(this.page);
                    this.proxyDialog = false;
                    item.state=state;
                } else {
                    this.$message({
                        type: "error",
                        message: res.msg
                    });
                }
            })
        },

        //导出
        exportExcelChild() {

        },
        //查询
        searchFromChild() {
            this.queryTableList();
        },
        //重置
        resetForm(formName) {
            this.userItem = this.dataList
            // this.$refs[formName].resetFields();
        }
    },
    components: {
        pagePagination,
        commonContainer,
        addDiglog
    }
}
</script>

<style scoped>
</style>